<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      蟹券查询
    </div>
    <div>
      <ul class="list-filter">
        <li>
          <p>蟹券编号</p>
          <p class="mt5">
            <el-input placeholder="请输入" size="small"></el-input>
          </p>
        </li>
        <li>
          <p style="margin-top: 25px">
            <el-button size="small" type="primary">查询</el-button>
          </p>
        </li>
      </ul>
      <template v-if="showResult">
        <div class="mt10 result-block">
          <section>
            <div class="ticket">
              <div class="left">
                <p>全球唯一编号:</p>
                <p class="small">XSCB-SYR-088</p>
                <p class="mt10">区块链Hash:</p>
                <p class="small">62sadsad2sad1sd32asd3</p>
                <img class="code-img" width="80" src="@/assets/code.svg" alt="">
              </div>
            </div>
          </section>
          <section class="ml30 content">
            <p class="header">
              <span>您查询的是当季发售的</span>
            </p>
            <p class="mt10">
              <span>第</span>
              <span class="ml20 number">088</span>
              <span class="ml20">张蟹券</span>
            </p>
          </section>
        </div>
        <div class="list-wrapper mt10">
          <h3>溯源信息</h3>
          <el-form class="small-form mt20" label-width="100px" label-position="right">
            <el-form-item label="生产商:">苏州xxx大闸蟹</el-form-item>
            <el-form-item label="登记证书:">
              <img src="https://iph.href.lu/240x300?text=%E7%85%A7%E7%89%87&fg=fff2cc&bg=bcbcbc" alt="">
            </el-form-item>
            <el-form-item label="产品名称:">农产品地理标志产品-阳澄湖大闸蟹</el-form-item>
            <el-form-item label="产品合格证:">
              <img src="https://iph.href.lu/240x300?text=%E7%85%A7%E7%89%87&fg=fff2cc&bg=bcbcbc" alt="">
            </el-form-item>
            <el-form-item label="产地:">苏州</el-form-item>
            <el-form-item label="查询次数:">1</el-form-item>
            <el-form-item label="首查时间:">2020-10-02</el-form-item>
            <el-form-item label="养殖基地:">苏州太湖一号基地</el-form-item>
            <el-form-item label="养殖户:">苏州xxxx养殖有限公司</el-form-item>
            <el-form-item label="溯源内容:">产自苏州市所辖阳澄湖区.........</el-form-item>
            <!-- <el-form-item label="苗种信息:">苏州xxx大闸蟹</el-form-item> -->
          </el-form>
        </div>
      </template>
      <div v-else class="txc list-wrapper mt10">
        <div >
          <img class="list-img" src="@/assets/keywords.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Ticket',
  data () {
    return {
      showResult: true
    }
  }
}
</script>
<style lang="scss" scoped>
.result-block {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 10px;
  background: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  .content {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .header {
    font-size: 30px;
  }
  .number {
    font-size: 60px;
    letter-spacing: .3ch;
    color: rgba(222, 110, 128, .4);
    text-shadow: 1px 1px white, -1px -1px #999;
  }
  .ticket {
    display: flex;
    position: relative;
    .small {
      font-size: 14px;
    }
    .left {
      font-size: 20px;
      width: 400px;
      height: 150px;
      padding: 20px;
      color: #fff;
      background: radial-gradient(circle at right top, transparent 10px, #e93f2c 0) top left / 300px 51% no-repeat,
    radial-gradient(circle at right bottom, transparent 10px,#e93f2c 0) bottom left /300px 51% no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ccc 0) top right /100px 51% no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right /100px 51% no-repeat;
    }
    .code-img {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
    }
  }
}
.list-img {
  margin: 50px auto;
}
</style>
